<template>

   <el-page-header  class="mb-2" :icon="ArrowLeft" @back="onBack">
    <template #content>
      <span class="text-large font-600 mr-3"> 充值 </span>
    </template>
  </el-page-header>

  <el-card class="box-card" shadow="hover">

      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :label-width="rel.labelWidth"
        class="ec2-form mt-1"
        style="max-width:750px"
        status-icon
      >
        <el-form-item label="充值金额" :label-position="rel.labelPosition" prop="amount">
          <el-space wrap :size="15">
            <el-input-number
              v-model.number="form.amount"
              :min="30"
              controls-position="right"
            />
            <div>
              <span class="font-sm mr">余额({{ rel.currency }})</span
              ><span class="font-lg font-weight-bold">{{ rel.balance }}</span>
            </div>
          </el-space>

        </el-form-item>
       <el-form-item>
        <el-button
          size="large"
          type="primary"
          :disabled="rel.isDisabled"
          @click="submitForm(formRef)"
        >
          充值
        </el-button>
      </el-form-item>
      </el-form>
  </el-card>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, computed} from "vue";
import {
  $getBalance,
  $recharge,
} from "@api/promotion";
import {ArrowLeft} from "@element-plus/icons-vue";
import { useLocaleStore } from "@/store/locales";
import { useRouter,useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const useLocale = useLocaleStore();
const formRef = ref();
const mobDate = new Date();
const rel = reactive({
  balance: 0, //余额
  currency:useLocale.dictionary.currency,//币种
  labelWidth:"150",
  labelPosition:"right"
});

onMounted(() => {
  if(route.meta.type==='edit'){
  rel.isDisabled=true;
  rel.title="编辑活动"
  }else{
    rel.isDisabled=false;
    rel.title="新增活动"
  }
  if (useLocale.isMob) {
  rel.labelWidth = 'auto';
  rel.labelPosition="top";
} else {
  rel.labelWidth = '150';
  rel.labelPosition="right";
}
getBalance();

});
const form = reactive({
  amount: 30,
});
const rules = reactive({
  amount: [
    {
      required: true,
      message: "请输入金额",
      trigger: "blur",
    },
  ]
});



const getBalance = async () => {
  const res = await $getBalance();
  rel.balance = res.data.balance;
};
const onBack = () => {
  router.go(-1)
}

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {

    if (valid) {
         console.log('a')
        }
  });
};

const back = () => {
  router.push("/promotion/activity");
};


const handleChange = async (value) => {
  const res = await $getCode({ region_area_id: value[2] });
  form.region_code = res.data.region_code;
};

</script>
<style>
.ec2-form {
  .el-form-item__content {
    line-height: 1;
  }
  .el-form-item .el-form-item {
    margin-bottom: 15px;
  }
}
</style>
<style lang="scss" scoped>
.ec2-form {
  
  .live {
    margin-left: 5px;
    border-radius: 3px;
    background: #dd3f4f;
    color: #fff;
    font-size: 10px;
    height: 18px;
    line-height: 18px;
    font-weight: 500;
    padding: 0 5px;
  }

}

.box-card {
  display: inherit;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
  // height: calc(100vh - 320px);

.foot{
  max-width:750px;
}
}


</style>
